<template>
  <view class="resume-detail-container">
    <!-- 固定顶部导航 -->
    <view class="fixed-header">
      <view class="back-button" @click="goBack">
        <image class="back-icon" src="/static/back.png"></image>
      </view>
      <text class="page-title">简历详情</text>
      <view class="header-right">
        <view class="share-btn" @click="shareResume">
          <image class="share-icon" src="/static/share-icon.png"></image>
        </view>
      </view>
    </view>

    <!-- 可滚动内容区域 -->
    <scroll-view scroll-y class="scrollable-content">
      <!-- 候选人基本信息卡片 -->
      <view class="hero-card">
        <view class="hero-background">
          <view class="hero-pattern"></view>
        </view>
        <view class="hero-content">
          <!-- 右上角工作信息 -->
          <view class="work-info-corner">
            <text class="work-location-text">{{ getDisplayLocation(candidateInfo.location) }}</text>
            <text class="apply-time-text">{{ candidateInfo.applyDate }}</text>
          </view>
          
          <view class="candidate-avatar-section">
            <view class="avatar-container">
              <view class="candidate-avatar-placeholder">
                <text class="avatar-text-top">面试</text>
                <text class="avatar-text-bottom">{{ candidateInfo.jobType || 'FullTime' }}</text>
              </view>
            </view>
          </view>
          
          <view class="candidate-info-section">
            <view class="name-position-row">
              <text class="candidate-name">{{ candidateInfo.name }}</text>
              <text class="candidate-position">{{ candidateInfo.position }}</text>
            </view>

            <view class="highlight-stats-row">
              <text class="stats-text">{{ candidateInfo.experience }}年工作经验 | {{ candidateInfo.education }}学历 | {{ candidateInfo.expectedSalary }}期望薪资</text>
            </view>

            <!-- 教育背景信息 -->
            <view class="education-info">
              <text class="education-text">{{ candidateInfo.school }} | {{ candidateInfo.education }} | {{ candidateInfo.graduationYear }}</text>
            </view>
          </view>
          
          <!-- 简历文件模块 - 合并到面试者卡片中 -->
          <view class="resume-file-section">
            <view class="file-header">
              <text class="file-title">简历文件</text>
            </view>
            
            <view class="file-list">
              <view 
                class="file-item" 
                v-for="(file, index) in resumeFiles" 
                :key="index"
              >
                <text class="file-name">{{ file.name }}</text>
                <view class="file-actions">
                  <button class="action-btn preview-btn" @click="previewFile(file)">预览</button>
                  <button class="action-btn download-btn" @click="downloadFile(file)">下载</button>
                </view>
              </view>
              
              <!-- 空状态展示 -->
              <view v-if="resumeFiles.length === 0" class="empty-file-state">
                <view class="empty-icon">📄</view>
                <text class="empty-text">暂无求职者简历</text>
                <text class="empty-desc">该候选人尚未上传简历文件</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 - 一行展示 -->
    <view class="footer-actions">
      <view class="actions-row">
        <button class="action-btn reject-btn" @click="markStatus('unsuitable')">
          不合适
        </button>
        <button class="action-btn pending-btn" @click="markStatus('pending')">
          待定
        </button>
        <button class="action-btn interview-btn" @click="markStatus('interview')">
          约面
        </button>
      </view>
    </view>

    <!-- 文件预览弹窗 -->
    <view class="preview-modal" v-if="showPreview" @click="closePreview">
      <view class="preview-content" @click.stop>
        <view class="preview-header">
          <text class="preview-title">{{ currentFile.name }}</text>
          <text class="close-preview" @click="closePreview">×</text>
        </view>
        <view class="preview-body">
          <!-- PDF预览 -->
          <web-view v-if="currentFile.type === 'pdf'" :src="currentFile.url"></web-view>
          <!-- 图片预览 -->
          <image v-else-if="currentFile.type === 'png'" :src="currentFile.url" mode="aspectFit"></image>
          <!-- Word文档提示 -->
          <view v-else-if="currentFile.type === 'word'" class="word-preview">
            <image class="word-icon" src="/static/word-icon.png"></image>
            <text class="word-tip">Word文档请下载后查看</text>
            <button class="download-word-btn" @click="downloadFile(currentFile)">立即下载</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      resumeId: '',
      showPreview: false,
      currentFile: null,
      candidateInfo: {
        name: '张三',
        position: '前端开发工程师',
        experience: 3,
        education: '本科',
        expectedSalary: '12k-18k',
        phone: '138****8888',
        email: 'zhangsan@example.com',
        location: '北京',
        school: '北京理工大学',
        graduationYear: '2021',
        applyDate: '2024-01-15 14:30',
        jobType: 'FullTime',
        skills: ['Vue.js', 'React', 'JavaScript', 'HTML/CSS', 'TypeScript'],
        workExperience: [
          {
            company: '腾讯科技有限公司',
            position: '前端开发工程师',
            period: '2021.07 - 2024.01',
            description: '负责公司核心产品的前端开发工作，参与多个大型项目的架构设计和开发实施。'
          },
          {
            company: '字节跳动',
            position: '前端实习生',
            period: '2020.06 - 2021.06',
            description: '参与今日头条移动端开发，负责用户界面优化和性能提升工作。'
          }
        ]
      },
      resumeFiles: []
    }
  },
  onLoad(options) {
    if (options.id) {
      this.resumeId = options.id
      this.loadResumeDetail()
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    loadResumeDetail() {
      // 这里应该根据resumeId加载具体的简历数据
      console.log('加载简历详情:', this.resumeId)
      
      // 获取简历文件
      this.fetchResumeFiles()
    },
    async fetchResumeFiles() {
      try {
        // 模拟接口调用获取简历文件
        // const response = await uni.request({
        //   url: `/api/resume/${this.resumeId}/files`,
        //   method: 'GET'
        // })
        
        // Mock数据 - 模拟不同类型的简历文件
        const mockFiles = [
          {
            id: 1,
            name: '张三_前端开发工程师_简历.pdf',
            type: 'pdf',
            url: 'https://example.com/resume1.pdf'
          },
          {
            id: 2,
            name: '个人作品集截图.png',
            type: 'image',
            url: 'https://example.com/portfolio.png'
          },
          {
            id: 3,
            name: '详细工作经历.docx',
            type: 'word',
            url: 'https://example.com/experience.docx'
          }
        ]
        
        this.resumeFiles = mockFiles
      } catch (error) {
        console.error('获取简历文件失败:', error)
        uni.showToast({
          title: '获取简历文件失败',
          icon: 'none'
        })
      }
    },
    getFileIcon(type) {
      const icons = {
        'pdf': '/static/pdf-icon.png',
        'png': '/static/image-icon.png',
        'word': '/static/word-icon.png'
      }
      return icons[type] || '/static/file-icon.png'
    },
    formatTime(timeStr) {
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      const minutes = Math.floor(diff / (1000 * 60))
      
      if (minutes < 60) return `${minutes}分隔线钟前`
      if (minutes < 1440) return `${Math.floor(minutes / 60)}小时前`
      return `${Math.floor(minutes / 1440)}天前`
    },
    previewFile(file) {
      this.currentFile = file
      this.showPreview = true
    },
    closePreview() {
      this.showPreview = false
      this.currentFile = null
    },
    downloadFile(file) {
      uni.showToast({
        title: '开始下载',
        icon: 'success'
      })
      // 这里实现文件下载逻辑
      console.log('下载文件:', file.name)
    },
    shareResume() {
      uni.showActionSheet({
        itemList: ['复制链接', '发送邮件', '生成二维码部分隔线'],
        success: (res) => {
          console.log('分隔线享方式:', res.tapIndex)
        }
      })
    },

    calculateDuration(period) {
      // 简单计算工作时长
      const parts = period.split(' - ')
      if (parts.length === 2) {
        const start = new Date(parts[0].replace('.', '/'))
        const end = parts[1] === '至今' ? new Date() : new Date(parts[1].replace('.', '/'))
        const months = Math.round((end - start) / (1000 * 60 * 60 * 24 * 30))
        const years = Math.floor(months / 12)
        const remainingMonths = months % 12
        
        if (years > 0) {
          return remainingMonths > 0 ? `${years}年${remainingMonths}个月` : `${years}年`
        } else {
          return `${months}个月`
        }
      }
      return '未知'
    },
    getCompanyType(company) {
      // 根据公司名称判断类型
      if (company.includes('腾讯') || company.includes('阿里') || company.includes('百度') || company.includes('字节')) {
        return '互联网大厂'
      } else if (company.includes('科技') || company.includes('网络')) {
        return '科技公司'
      } else {
        return '知名企业'
      }
    },
    getDisplayLocation(location) {
      // 处理工作地点显示，最多显示3个
      if (!location) return ''
      
      // 如果是字符串，按逗号或分隔线号分隔线割
      let locations = []
      if (typeof location === 'string') {
        locations = location.split(/[,，;；]/).map(loc => loc.trim()).filter(loc => loc)
      } else if (Array.isArray(location)) {
        locations = location
      } else {
        return location.toString()
      }
      
      // 最多显示3个地点
      const displayLocations = locations.slice(0, 3)
      let result = displayLocations.join('、')
      
      // 如果超过3个，添加省略号
      if (locations.length > 3) {
        result += '等'
      }
      
      return result
    },
    markStatus(status) {
      const statusMap = {
        'unsuitable': '不合适',
        'pending': '待定',
        'interview': '约面'
      }
      
      uni.showModal({
        title: '确认操作',
        content: `确定要将此候选人标记为"${statusMap[status]}"吗？`,
        success: (res) => {
          if (res.confirm) {
            // 这里实现状态更新逻辑
            uni.showToast({
              title: `已标记为${statusMap[status]}`,
              icon: 'success'
            })
            
            // 更新完成后返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.resume-detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
  overflow: hidden;
}

/* 固定顶部导航 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

/* 可滚动内容区域 */
.scrollable-content {
  flex: 1;
  margin-top: 0;
  margin-bottom: 200rpx;
  padding: 160rpx 32rpx 32rpx;
  height: calc(100vh - 200rpx);
  overflow-y: auto;
}

@keyframes backgroundMove {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  33% { transform: translateX(50rpx) translateY(-30rpx) rotate(120deg); }
  66% { transform: translateX(-30rpx) translateY(50rpx) rotate(240deg); }
  100% { transform: translateX(0) translateY(0) rotate(360deg); }
}

@keyframes headerShimmer {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes headerSweep {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1rpx solid rgba(16, 185, 129, 0.2);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #000000;
  z-index: 1;
}

.header-right {
  position: absolute;
  top: 60rpx;
  right: 36rpx;
  z-index: 10;
}

.share-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20rpx);
  transition: all 0.3s ease;
}

.share-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.2);
}

.share-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 滚动内容 */
.detail-scroll {
  flex: 1;
  padding: 32rpx 32rpx 200rpx;
}

/* Hero卡片 - 简洁设计 */
.hero-card {
  position: relative;
  margin: 0;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  z-index: 5;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #05a273 0%, #04c2a4 100%);
  opacity: 0.05;
  z-index: 1;
}

@keyframes patternFloat {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(15rpx) translateY(-8rpx) rotate(90deg);
  }
  50% {
    transform: translateX(-8rpx) translateY(15rpx) rotate(180deg);
  }
  75% {
    transform: translateX(12rpx) translateY(5rpx) rotate(270deg);
  }
}

.hero-content {
  position: relative;
  padding: 48rpx 36rpx;
  color: #1a202c;
  z-index: 10;
}

/* 右上角工作信息 */
.work-info-corner {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 3;
  gap: 6rpx;
}

.work-location-text {
  font-size: 20rpx;
  color: #4a5568;
  font-weight: 600;
  background: rgba(5, 162, 115, 0.1);
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  border: 1rpx solid rgba(5, 162, 115, 0.2);
  max-width: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apply-time-text {
  font-size: 18rpx;
  color: #718096;
  font-weight: 500;
}

.candidate-avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 32rpx;
}

.avatar-container {
  position: relative;
}

.candidate-avatar-placeholder {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f6f3 0%, #d1f2e9 50%, #b8e6d9 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #1a202c;
  border: 3rpx solid rgba(5, 162, 115, 0.2);
  box-shadow:
    0 12rpx 40rpx rgba(5, 162, 115, 0.15),
    0 6rpx 20rpx rgba(5, 162, 115, 0.1),
    0 2rpx 8rpx rgba(0, 0, 0, 0.06),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
  position: relative;
  z-index: 3;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.candidate-avatar-placeholder::before {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%);
  z-index: -1;
  animation: avatarGlow 4s ease-in-out infinite;
}

@keyframes avatarGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* 页面进入动画 */
@keyframes pageEnter {
  0% {
    opacity: 0;
    transform: translateY(30rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardSlideUp {
  0% {
    opacity: 0;
    transform: translateY(50rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 为主要卡片添加进入动画 */
.hero-card {
  animation: cardSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.resume-file-card {
  animation: cardSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
  opacity: 0;
}

.footer-actions {
  animation: pageEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
  opacity: 0;
}

/* 按钮悬停效果增强 */
/* 文件项悬停效果 */
/* 页面整体动画 */
.fixed-header,
.scrollable-content,
.footer-actions {
  animation: pageEnter 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}



.avatar-text-top {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 4rpx;
}

.avatar-text-bottom {
  font-size: 24rpx;
  color: #4a5568;
  font-weight: 600;
}

.candidate-info-section {
  text-align: center;
}

.name-position-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 24rpx;
}

.candidate-name {
  font-size: 52rpx;
  font-weight: 800;
  color: #1a202c;
  letter-spacing: 1rpx;
  margin: 0;
}



.highlight-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24rpx;
}

.stats-text {
  font-size: 26rpx;
  font-weight: 600;
  color: #2d3748;
  text-align: center;
  line-height: 1.4;
  background: rgba(5, 162, 115, 0.08);
  padding: 12rpx 24rpx;
  border-radius: 18rpx;
  border: 1rpx solid rgba(5, 162, 115, 0.15);
  letter-spacing: 0.5rpx;
}

/* 教育背景信息 */
.education-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16rpx;
  margin-bottom: 32rpx;
}

.education-text {
  font-size: 22rpx;
  font-weight: 500;
  color: #4a5568;
  text-align: center;
  line-height: 1.2;
  background: rgba(5, 162, 115, 0.06);
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  border: 1rpx solid rgba(5, 162, 115, 0.12);
  letter-spacing: 0.2rpx;
}

/* 快速联系卡片 */
.quick-contact-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}

.contact-header {
  text-align: center;
  margin-bottom: 24rpx;
}

.contact-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a202c;
  display: block;
  margin-bottom: 8rpx;
}

.contact-subtitle {
  font-size: 26rpx;
  color: #718096;
}

.contact-actions {
  display: flex;
  gap: 16rpx;
}

.contact-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.contact-item:active {
  transform: scale(0.98);
  border-color: #05A273;
  background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);
}

.contact-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 16rpx;
  border-radius: 12rpx;
}

.phone-icon {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.email-icon {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 24rpx;
  color: #718096;
  display: block;
  margin-bottom: 4rpx;
}

.contact-value {
  font-size: 28rpx;
  color: #2d3748;
  font-weight: 600;
}

/* 信息卡片容器 */
.info-cards-container {
  display: flex;
  justify-content: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.info-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24rpx;
  padding: 24rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  max-width: 400rpx;
  min-width: 300rpx;
}

.info-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.info-card-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #2d3748;
}

.info-card-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-key {
  font-size: 24rpx;
  color: #718096;
}

.info-val {
  font-size: 26rpx;
  color: #2d3748;
  font-weight: 600;
  text-align: right;
  flex: 1;
  margin-left: 16rpx;
}

/* 候选人信息卡片 */
.candidate-info-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 36rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #eef2f7;
}

.candidate-header {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}

.candidate-avatar-placeholder {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  background: linear-gradient(135deg, #8b60ed 0%, #6a4aac 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: white;
  border: 2rpx solid #d4edda;
  box-shadow: 0 6rpx 12rpx rgba(139, 96, 237, 0.2);
}

.avatar-text-top {
  font-size: 28rpx;
  font-weight: 700;
  color: white;
  margin-bottom: 4rpx;
}

.avatar-text-bottom {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.candidate-main-info {
  flex: 1;
}

.candidate-name {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}



.candidate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.info-tag {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  background: #f0f2f5;
  color: #666;
  font-weight: 500;
}

.salary-tag {
  background: #fff3cd;
  color: #d4a700;
}

/* 详细信息网格 */
.detail-info-grid {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 24rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #999;
  width: 160rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
  text-align: right;
}

/* 简历文件卡片 */
.resume-files-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 36rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #eef2f7;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #05a273;
}

.file-count {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 16rpx;
  background: #f8f9fa;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.file-item:active {
  background: #e9ecef;
  border-color: #05a273;
}

.file-icon-container {
  margin-right: 16rpx;
}

.file-icon {
  width: 48rpx;
  height: 48rpx;
}

.file-info {
  flex: 1;
}

.file-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 4rpx;
}

.file-meta {
  font-size: 24rpx;
  color: #999;
}

.file-actions {
  display: flex;
  gap: 16rpx;
}

.preview-btn, .download-btn {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-weight: 500;
}

.preview-btn {
  color: #333333;
  background: rgba(5, 162, 115, 0.1);
}

.download-btn {
  color: #05a273;
  background: rgba(5, 162, 115, 0.1);
}

/* 技能和经历卡片 */
.skills-card, .experience-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 36rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #eef2f7;
}

.skills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.skill-tag {
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #333333;
  background: rgba(5, 162, 115, 0.1);
  font-weight: 500;
}

.experience-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.experience-item {
  padding: 24rpx;
  border-radius: 16rpx;
  background: #f8f9fa;
  border-left: 4rpx solid #05A273;
}

.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.company-name {
  font-size: 30rpx;
  font-weight: 700;
  color: #333;
}

.work-period {
  font-size: 24rpx;
  color: #999;
}

.position-name {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
  display: block;
  margin-bottom: 12rpx;
}

.work-description {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 底部操作按钮 - 悬浮设计 */
.footer-actions {
  position: fixed;
  bottom: 40rpx;
  left: 32rpx;
  right: 32rpx;
  background: transparent;
  padding: 0;
  z-index: 15;
}

.actions-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 16rpx;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  border-radius: 32rpx;
  padding: 0;
  box-shadow: none;
  border: none;
}

.action-btn {
  flex: 1 !important;
  height: 80rpx !important;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 700;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
}

.reject-btn {
  background: linear-gradient(135deg, #e57373 0%, #d32f2f 100%);
  color: white;
  border: none;
  box-shadow: 0 6rpx 20rpx rgba(229, 115, 115, 0.3);
}

.reject-btn:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
}

.pending-btn {
  background: linear-gradient(135deg, #ffb74d 0%, #ff8f00 100%);
  color: white;
  border: none;
  box-shadow: 0 6rpx 20rpx rgba(255, 183, 77, 0.3);
}

.pending-btn:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #ff8f00 0%, #f57c00 100%);
}

.interview-btn {
  background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
  color: white;
  border: none;
  box-shadow: 0 6rpx 20rpx rgba(102, 187, 106, 0.3);
}

.interview-btn:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
}

/* 简历文件模块 - 合并到面试者卡片中 */
.resume-file-section {
  margin-top: 32rpx;
  position: relative;
  z-index: 2;
}

.file-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 28rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #e2e8f0;
  position: relative;
  z-index: 2;
}

.file-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: 0.5rpx;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  position: relative;
  z-index: 2;
}

.file-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 1rpx solid #e2e8f0;
  transition: all 0.3s ease;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.file-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1a202c;
  flex: 1;
  margin-right: 20rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.file-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 12rpx;
  align-items: center;
}

.action-btn {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.preview-btn {
  background: rgba(5, 162, 115, 0.1);
  color: #05a273;
  border: 1rpx solid rgba(5, 162, 115, 0.2);
}

.preview-btn:active {
  transform: scale(0.98);
}

.download-btn {
  background: rgba(5, 162, 115, 0.1);
  color: #05a273;
  border: 1rpx solid rgba(5, 162, 115, 0.2);
}

.download-btn:active {
  transform: scale(0.98);
}



/* 文件section */
.files-section {
  margin-bottom: 32rpx;
}

.files-grid {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.file-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.file-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.1);
}

.file-preview {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  position: relative;
}

.file-type-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 700;
  color: white;
  z-index: 1;
}

.file-type-badge.pdf {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
}

.file-type-badge.png {
  background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
}

.file-type-badge.word {
  background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
}

.file-icon-large {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  margin-right: 20rpx;
}

.file-icon {
  width: 48rpx;
  height: 48rpx;
}

.file-details {
  flex: 1;
}

.file-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #2d3748;
  display: block;
  margin-bottom: 8rpx;
}

.file-meta-row {
  display: flex;
  gap: 16rpx;
}

.file-size, .file-time {
  font-size: 24rpx;
  color: #718096;
}

.file-actions {
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;
}

.file-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 600;
  transition: all 0.3s ease;
}

.preview-btn {
  background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);
  color: #333333;
  border: 1rpx solid #05A273;
}

.download-btn {
  background: linear-gradient(135deg, #e6fffa 0%, #ccf7ed 100%);
  color: #38a169;
  border: 1rpx solid #38a169;
}

.action-icon {
  font-size: 20rpx;
}

.action-text {
  font-size: 24rpx;
}

/* 技能section */
.skills-section {
  margin-bottom: 32rpx;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200rpx, 1fr));
  gap: 16rpx;
}

.skill-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20rpx);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skill-icon {
  font-size: 24rpx;
  margin-bottom: 8rpx;
}

.skill-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #2d3748;
  display: block;
  margin-bottom: 12rpx;
}

.skill-level {
  margin-top: 8rpx;
}

.level-bar {
  width: 100%;
  height: 6rpx;
  background: #e2e8f0;
  border-radius: 3rpx;
  overflow: hidden;
}

.level-fill {
  height: 100%;
  background: linear-gradient(135deg, #05A273 0%, #04C2A4 100%);
  border-radius: 3rpx;
  transition: width 1s ease;
}

/* 工作经历section */
.experience-section {
  margin-bottom: 32rpx;
}

.timeline-container {
  position: relative;
}

.timeline-item {
  display: flex;
  margin-bottom: 32rpx;
}

.timeline-marker {
  position: relative;
  margin-right: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #05A273 0%, #04C2A4 100%);
  box-shadow: 0 0 0 6rpx rgba(5, 162, 115, 0.1);
}

.timeline-line {
  width: 2rpx;
  flex: 1;
  background: linear-gradient(to bottom, #05A273, #e2e8f0);
  margin-top: 12rpx;
  min-height: 80rpx;
}

.timeline-content {
  flex: 1;
}

.exp-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}

.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.company-info {
  flex: 1;
}

.company-name {
  font-size: 30rpx;
  font-weight: 700;
  color: #2d3748;
  display: block;
  margin-bottom: 8rpx;
}

.position-name {
  font-size: 26rpx;
  color: #4a5568;
  font-weight: 600;
}

.period-badge {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);
  border: 1rpx solid #05A273;
}

.work-period {
  font-size: 22rpx;
  color: #333333;
  font-weight: 600;
}

.work-description {
  font-size: 26rpx;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.exp-tags {
  display: flex;
  gap: 12rpx;
}

.exp-tag {
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%);
  color: #38a169;
  font-weight: 500;
  border: 1rpx solid #38a169;
}

/* 文件预览弹窗 */
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-content {
  width: 90%;
  height: 80%;
  background: white;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.preview-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.close-preview {
  font-size: 48rpx;
  color: #999;
  font-weight: 300;
}

.preview-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
}

.word-icon {
  width: 120rpx;
  height: 120rpx;
}

.word-tip {
  font-size: 28rpx;
  color: #666;
}

/* 空状态样式 */
.empty-file-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  text-align: center;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 1rpx solid #e2e8f0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 12rpx;
  display: block;
}

.empty-desc {
  font-size: 24rpx;
  color: #4a5568;
  line-height: 1.5;
  display: block;
}
</style>
